<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>消费者首页</title>
    <!-- 使用相对路径引用 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/csm_index.css">
    <style>
        /* 搜索相关样式 */
        .search-container {
            text-align: center;
            margin: 20px auto;
            max-width: 600px;
        }
        #search-input {
            width: 70%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            outline: none;
        }
        .search-btn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .search-btn:hover {
            background-color: #45a049;
        }
        .search-results {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .result-header {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .result-count {
            color: #666;
            font-size: 14px;
        }
        .result-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .result-item {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            transition: all 0.3s ease;
        }
        .result-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .item-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .item-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .info-label {
            font-weight: bold;
            color: #555;
        }
        .no-result {
            text-align: center;
            color: #999;
            padding: 40px;
            font-size: 16px;
        }
        .error-message {
            color: #e74c3c;
            text-align: center;
            padding: 20px;
            font-size: 16px;
        }
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
    </style>
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 为搜索框添加回车键监听
            document.getElementById('search-input').addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    search();
                }
            });
        });
        
        // 搜索函数
        function search() {
            const keyword = document.getElementById('search-input').value.trim();
            const resultsContainer = document.getElementById('search-results');
            
            // 验证输入
            if (!keyword) {
                resultsContainer.innerHTML = '<div class="error-message">请输入搜索内容</div>';
                return;
            }
            
            // 显示加载状态
            resultsContainer.innerHTML = '<div class="loading">搜索中...</div>';
            
            // 发送AJAX请求
            const xhr = new XMLHttpRequest();
            const url = '${pageContext.request.contextPath}/consumer/search';
            
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.success) {
                                displayResults(response.data, response.count);
                            } else {
                                resultsContainer.innerHTML = '<div class="error-message">' + (response.message || '搜索失败') + '</div>';
                            }
                        } catch (e) {
                            resultsContainer.innerHTML = '<div class="error-message">解析响应数据失败</div>';
                        }
                    } else {
                        resultsContainer.innerHTML = '<div class="error-message">网络请求失败</div>';
                    }
                }
            };
            
            xhr.send('keyword=' + encodeURIComponent(keyword));
        }
        
        // 显示搜索结果
        function displayResults(data, count) {
            const resultsContainer = document.getElementById('search-results');
            
            if (!data || data.length === 0) {
                resultsContainer.innerHTML = '<div class="no-result">未找到相关信息</div>';
                return;
            }
            
            let html = `<div class="result-header">
                        搜索结果 <span class="result-count">（共 ${count} 条）</span>
                      </div>
                      <div class="result-list">`;
            
            // 为每条数据创建HTML
            data.forEach(item => {
                html += '<div class="result-item">' +
                    '<div class="item-title">' + (item.productName || '未命名产品') + '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">溯源码：</span>' +
                        '<span>' + (item.traceCode || '-') + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">批次号：</span>' +
                        '<span>' + (item.batchNo || '-') + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">品种：</span>' +
                        '<span>' + (item.variety || '-') + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">产地：</span>' +
                        '<span>' + (item.origin || '-') + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">年份：</span>' +
                        '<span>' + (item.year || '-') + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">生产日期：</span>' +
                        '<span>' + formatDate(item.productionDate) + '</span>' +
                    '</div>' +
                    '<div class="item-info">' +
                        '<span class="info-label">加工方法：</span>' +
                        '<span>' + (item.processingMethod || '-') + '</span>' +
                    '</div>' +
                '</div>';
            });
            
            html += '</div>';
            resultsContainer.innerHTML = html;
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            
            try {
                const date = new Date(dateString);
                return date.getFullYear() + '-' + 
                       String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                       String(date.getDate()).padStart(2, '0');
            } catch (e) {
                return '-';
            }
        }
    </script>
</head>
<body>
    <%@ include file="consumer_navbar.jsp" %>
     <!-- 页面标题 -->
    <div class="header">
        参生智控——人参生态质控与溯源系统
    </div>
    <!-- 页面内容 -->
    <div class="content">
        <!-- 搜索框和搜索按钮 -->
        <div class="search-container">
            <input type="text" id="search-input" placeholder="请输入溯源码、批次号、产品名称、品种或产地..." />
            <button onclick="search()" class="search-btn">搜索</button>
        </div>
        <!-- 显示搜索结果 -->
        <div id="search-results" class="search-results">
            <!-- 搜索结果会显示在这里 -->
        </div>
    </div>
</body>
</html>
